<template>
  <div class="contactLevel_seletor">
    <div class="section">
      <div class="section-container">
        <ul>
          <li v-for="(v, index) in items" @click="choise(v, index+1)" ontouchstart="this.style.background='rgb(243, 243, 243)'" ontouchend="this.style.background='rgb(255, 255, 255)'">
            {{v}}
            <i class="icon-checkbox active" v-if="v==value"></i>
          </li>
        </ul>
        <div class="tip">
          设置联系人等级及其可见范围，可隐藏联系人相关信息。请通过企业通讯录后台web版进行相关设置
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  name: 'contactLevel_seletor',

  data () {
    return {
      items: [],
      value: 100
    };
  },

  created () {
    this.getPriRange();
    fxAPI.api('setAppTitle', {title: '选择等级'});
  },

  methods: {
    getPriRange () {
      this.$http.post(this.api.eab, {
        module: 'contactLevelConfig',
        action: 'getContactLevelConfigListByEnterpriseId'
      }, {showLoading: true}).then(
        res => {
          if (res.body.result === 1) {

            let contactLevelConfigs = res.body.data || [];

            contactLevelConfigs.forEach(v => {
              if (!this.items.contains(v.contactLevel)) {
                this.items.push(v.contactLevel);
              }
            });

            if (!this.items.contains(100)) {
              this.items.push(100);
            };

            this.items = this.items.sort(function(a,b){
              return a - b;
            });

            this.items.forEach((v, i) => {
              if (v === this.$store.state.contactLevelSelector.level) {
                this.value = v;
              }
            });
          }
        }
      );
    },

    choise (value, current) {
      this.value = value;
      this.$store.commit('contactLevelSelector/set', value);
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../scss/mixin.scss';
  .contactLevel_seletor{
    @include app-top-main-bottom(0, 0);

    ul{
      width: 100%;
      padding-left: 20px;
      box-sizing: border-box;
      background: #fff;

      li{
        position: relative;
        width: 100%;
        height: 100px;
        line-height: 100px;
        font-size: 30px;


        @include border-1px(#ccc);
        &:last-child{
          &:after{
            border-bottom: none;
          }
        }

        .active{
          right: 20px;
          left: auto;
        }
      }
    }
    .tip{
      background: #ccc;
      color: #fff;
      padding: 10px 20px;
      font-size: 22px;
      line-height: 1.6;
    }
  }
</style>